Viewer

Java Scripts Basics?

So you're ready to learn how to write your first JavaScript? Well before you learn the language, you should know how it works. Scripts placed within <SCRIPT> tags are evaluated after the page loads. Functions are stored, but not executed. In fact, functions are executed by events in the page.

It's important to understand the difference between defining a function and calling the function. Defining the function simply names the function and specifies what to do when the function is called. Calling the function actually performs the specified actions with the indicated parameters.

If you are confused, don't be. It really isn't as difficult as it sounds.


<HEAD>
<SCRIPT LANGUAGE="JavaScript">
    function square(i) {
    document.write("The call passed ", i ," to the function.","<BR>")
    return i * i  }  document.write("The function returned ",square(2),".")
</SCRIPT>
</HEAD>

If you were to put this in your HTML document, it would be seen in your browser as:We passed 2 to the function. The function returned 4. This is a simple script which defines 2 as a function, then orders the browser to double the size of the fuction by using return i * i The reason you see We passed 2 to the function. The function returned 4. is because of document.write, which orders the browser to write the results.

The function document.write is used in just about any JavaScript you write. The example of JavaScript printing Hello, World! is shown below:


<BODY>
<SCRIPT LANGUAGE="JavaScript">
    document.write('Hello, World!');
</SCRIPT>
</BODY>

This function is held in the <BODY> tag rather than in the <HEAD> tag. document.write is known as a host function and all web browsers supporting JavaScript will display this simply as the text Hello, World!.

In JavaScript, you can create an INPUT/OUTPUT function in 3 simple, effective ways. By changing document.write('Hello, World!'); to alert('Hello, World!');, you can alert your visitor with a popup button which forces the user to click OK in order to continue. The other 2 are confirm('Enter?'); which forces a user to either click OK and continue or cancel and leave, and prompt('Your name is?'); which allows the visitor to type into a textbox.

Please keep this in mind for later in the tutorial. Now, let us focus on storing information inside JavaScript code using variables & or directly in constants. A variable begins with var and is stored directly in the script. You'll find most of your scripting trouble held within variables because of its exactness. If you use an unknown character in one, your entire script will not work.

JavaScript is a loosely typed language meaning that variables do not necessarily have a defined variable type. Each variable can hold values of various types. This may all sound weird to the total non programmer, but its easy once you experiment with it.


var x= 10;
var y= "11";
var y= '11';

var z= 1 + y;

document.write(x);

This example shows basically one of several things variables can do. This is obviously simple addition. By defining variables, you can write them using document.write(x); (where x is your var name) or call them from further in your script.

The simple building blocks in all data of JavaScript are known as the primitive types. These are as follows:

Strings: "Hello World!"
Numbers: Integers (1, 50) & Decimals (1.5, 50.1)
boolean: True or False

JavaScript will recognize the following special characters. This idea derived from the C programming language:

\n - newline
\t - tab
\f - form feed
\b - backspace
\r - carriage return

In addition to the 3 primitive types, there are 3 less obvious ones:

NaN - Not a Number; a result of a math operation gone wrong.
null - No Data. Nothing has been stored in the variable.
undefined - No Data. Usually bad; error in your script.

Now that you have some background on variables, we introduce the array. An array lets you store multiple pieces of data in the same variable. Using arrays allows you to put all similar variables under 1 name, rather than name them all separately.

In JavaScript 1.2, the statement new Array creates a new array set to a specific value. This allows you to create an array with several elements by listing them in brackets:


arrayName = [element0, element1, ..., elementn]

In this example arrayName is the name of the new array & elementn is a list of values for the array's elements.

Arrays can expand in the number of size and are quite flexible compared to arrays used in C. Another trick with an array is placing an array element in another array. This opens an unlimited amount of uses in mathematics and graphics.

Now in the next section, we'll look futher into functions and we'll meet statements, objects, operators, & type conversation. Ready?

A JavaScript consists of a sequence of statements. Statements is to a JavaScript as a plot is to a story. All JavaScripts must have statements to exist. Statements are read from top to bottom unless the script tells it otherwise. Scripters usually use something called comments to describe a statement. Usually, they use comments to help someone viewing their script, bringing them through it step by step.

A block is a collection of statements. The browser can read a block as one statement, even though it is a collection of statements.


{
clib.put('The value is')			// Comment 1
clib.put{'15')					// Comment 2
}
	/* another comment right here

Here we see a statement clib.put('The value is'). Now notice { & }. This is a block; just as defined, a collection of statements. This one only contains 2 statements, but this is just and example. This example also introduces // Comment which includes comments for anyone viewing the source to read. This will not be picked up by the browser. You can either use // or /*.

Please note we are just introducing basic commands the language uses. We do not expect you to memorize this information, but you must be familiar with it. We will soon tell you how this all fits together.